网站建设之HTML5：绘制图像并将文本添加到画布元素
在本部分中，我们将回顾绘图图像并在画布上添加文本。
使用JavaScript 的canvas drawImage 函数允许您在定义的画布区域内创建图像对象。所述的drawImage函数包括三个参数，并在形式表示的drawImage（对象图像，浮动的x，浮子Y） 。canvas元素和drawImage函数支持的图像文件格式为.jpg，.gif和.png。为了使绘制图像功能起作用，我们必须设置变量并定义图像对象。对于此示例，我们将其设置为“ img”，如var img = new Image（）;所示。然后提供图像源，然后是图像加载，以及最终的drawImage函数，其参数定义如下例所示：
//绘制图像功能
var img = new Image（）;
img.src =“ images / Figure_A.png”;
img.onload = function（）{context.drawImage（img，145，145）;
};
生成的画布图像如下所示，如Firefox 3.6所示：
图A
整个代码段显示在这里：
<body onLoad =“ drawCanvas（）;”>
<！-脚本绘制画布圆并绘制图像->
<脚本>
函数drawCanvas（）{var circle_canvas = document.getElementById（“ canvas”）;
var context = circle_canvas.getContext（“ 2d”）;
//填充样式
context.fillStyle =“ rgba（93,179,199,0.20）”;
//开始路径
context.beginPath（）;
//画布形状
context.arc（225,225,115,0，Math.PI * 2，true）;
//关闭路径
context.closePath（）;
//填充形状
context.fill（）;
//绘制图像功能
var img = new Image（）;
img.src =“ images / Figure_A.png”;
img.onload = function（）{context.drawImage（img，145，145）;
};
}
</ script>
<h1>画布示例</ h1>
<h2>绘制图像功能示例</ h2>
<！-画布圆圈元素标签->
<canvas id =“ canvas” width =“ 340” height =“ 340”>
<！-后备内容->
<p>很抱歉，您的浏览器目前不支持画布！</ p>
</ canvas>
新增文字
可以使用字体和文本属性以及几种文本方法来绘制画布文本。该字体属性字符串有一个默认设置10px的，无衬线，并且可以包括任何你通常会一个CSS字体规则中添加。所述textAlign设置属性字符串是自我解释性的，且它有一个缺省值开始，并支持的值：开始，结束，左，右，或中心。该textBaseline IDL属性字符串有一个默认的字母，并支持值：上，挂，中间的字母，表意，或底部。
WHATWG指定与字体对齐点相对应的textBaseline属性的关键字，其中：
top对应于em正方形的顶部
悬挂是悬挂的基线
中间是em广场的中间
字母是字母基线
表意是表意基线
底部对应于em正方形的底部
文本方法包括：
fillText（字符串文本，float x，float y，[可选] float maxWidth）
strokeText（字符串文本，float x，float y，[可选] float maxWidth）
Metrics接口包括measureText（字符串文本），并以当前字体返回给定文本的TextMetrics对象，即metrics = context.measureText（string text）。
一个基本的文本示例包括使用lineWidth来描边粗细的上下文，并使用fillStyle来设置填充的颜色，该样式也可以用于建立渐变设置。笔触的颜色是使用lineStyle设置的；font和fillText 也在下面的JavaScript代码和HTML代码段中显示。
<脚本>
函数drawCanvas（）{var canvas = document.getElementById（“ canvasText”）;
var context = canvas.getContext（'2d'）;
//填写文字
context.lineWidth = 1;
context.fillStyle =“＃CC00FF”;
context.lineStyle =“＃ffff00”;
context.font =“ 18px sans-serif”;
context.fillText（“ Fill Text，18px，sans-serif”，20，20）;
}
</ script>
<h2>画布文字示例</ h2>
<！-画布元素标签->
<canvas id =“ canvasText” width =“ 235” height =“ 25”>
<！-后备内容->
<p>很抱歉，您的浏览器目前不支持画布！</ p>
</ canvas>
下面的屏幕截图显示了上述代码在Firefox 3.6中显示的结果。
图B
下一个示例显示使用JavaScript代码的strokeText和下面的结果屏幕截图。
<脚本>
函数drawCanvas（）{var canvas = document.getElementById（“ canvasText”）;
var context = canvas.getContext（'2d'）;
//描边文字
context.font =“ 22px verdana”;
context.strokeText（“ Stroke Text，22px，veranda”，20，50）;
}
</ script>
图C
此示例中的字体播放显示了在字体上添加斜体，26px和时间：
<脚本>
函数drawCanvas（）{var canvas = document.getElementById（“ canvasText”）;
var context = canvas.getContext（'2d'）;
//斜体描边文字
context.font =“ italic 26px Times”;
context.strokeText（“ Italic，Stroke，Text，26px，times”，20，85）;
}
</ script>
图D
填充笔划文字，在这个例子中，演示了两种情况下fillText方法和strokeText，这意味着该文本必须以相同的x和y坐标绘制两次，因为显示在一段JavaScript代码和相应的截图：
<脚本>
函数drawCanvas（）{var canvas = document.getElementById（“ canvasText”）;
var context = canvas.getContext（'2d'）;
//填充描边文本
context.lineWidth = 2;
context.strokeStyle =“ rgba（35，70，237，.8）”;
context.font =“ 28pt sans-serif”;
context.fillText（“ Fill，Stroke Text，28pt，sans-serif”，20，130）;
context.strokeText（“ Fill，Stroke Text，28pt，sans-serif”，20，130）;
}
</ script>
图E
阴影文本效果可以使用shadowOffsetX，shadowOffsetY和shadowColor的上下文在画布中呈现，如示例片段和随附的屏幕截图所示：
<脚本>
函数drawCanvas（）{var canvas = document.getElementById（“ canvasText”）;
var context = canvas.getContext（'2d'）;
//阴影粗体
context.lineWidth = 1;
context.fillStyle =“＃0000ff”;
context.strokeStyle =“＃880000”;
context.font =“ bold 28pt sans-serif”;
context.shadowOffsetX = 2;
context.shadowOffsetY = -2;
context.shadowColor =“＃888888”;
context.fillText（“ Shadow，Bold Text，28pt，sans-serif”，20，180）;
}
</ script>
图F
将模糊与上下文shadowBlur一起添加；JavaScript代码段和生成的屏幕截图如下：
<脚本>
函数drawCanvas（）{var canvas = document.getElementById（“ canvasText”）;
var context = canvas.getContext（'2d'）;
//阴影模糊描边粗体
context.fillStyle =“＃5CADE9”;
context.lineStyle =“＃5CADE9”;
context.font =“ bold 28pt sans-serif”;
context.shadowOffsetX = 4;
context.shadowOffsetY = 4;
context.shadowBlur = 8;
context.fillText（“ Shadow，Blur，Stroke，Bold Text，28pt”，20，220）;
context.strokeText（“ Shadow，Blur，Stroke，Bold Text，28pt”，20，220）;
}
</ script>
图G
使用该变量创建 渐变文本，以创建带有两对坐标的线性渐变，形式为createLinearGradient（x1，y1，x2，y2），其中变量设置为var gradient = context.createLinearGradient（5，50，500， 20）; 在这个例子中。设置为fillStyle时可以绘制它。在下面的示例中，我们将填充和描边文本与渐变设置结合使用：
<脚本>
函数drawCanvas（）{var canvas = document.getElementById（“ canvasText”）;
var context = canvas.getContext（'2d'）;
//渐变文字填充和描边
var gradient = context.createLinearGradient（5，50，500，20）;
gradient.addColorStop（0.1，'＃F82E23'）;
gradient.addColorStop（0.25，'＃E2E651'）;
gradient.addColorStop（0.5，'＃55D268'）;
gradient.addColorStop（0.75，'＃5A77DA'）;
gradient.addColorStop（1，'＃C84489'）;
context.fillStyle =梯度;
context.font =“ bold 36pt sans-serif”;
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 10;
context.fillText（“ Gradient Fill Text”，20，280）;
context.fillStyle ='＃000000';
context.strokeStyle =梯度;
context.lineWidth = 3;
context.strokeText（“ Gradient Stroke Text”，20，350）;
}
</ script>
图H
表示画布文本的其他方式可以包括在使用上下文mozTextAlongPath函数的路径上，以在圆，线或形状上绘制文本。也可以使用带有createPattern（img，repeat）函数的fillStyle方法将图像图案合并到文本中。